<template>
  <div class="scanning-banner">
    <el-header style="font-size: 20px; font-weight: bold">
      <i class="el-icon-folder-add" style="margin-right: 15px"></i>
      <span>新建任务</span>
    </el-header>
    <div v-loading="loading" class="scanning-menu">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="min-width: 780px" class="scanning-list">
          <el-form-item label="新建名称" prop="name">
            <el-input style="width: 90%" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="任务类型" prop="type">
            <el-select
              style="float: left"
              v-model="ruleForm.type"
              placeholder="请选择类型"
            >
              <el-option
                @click="changeShow()"
                label="资产识别"
                value="1"
              ></el-option>
              <el-option label="漏洞检测" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div class="scanning-add">
            <div v-for="(item) in arrayData" :key="item.id">
              <el-form-item label="IP地址" prop="ip">
                <el-input
                  style="width: 250px"
                  v-model="item.ip"
                  placeholder="请输入IP地址"
                ></el-input>
                <el-button style="margin-left: 5px" type="primary" @click="add"
                  >+</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>
        <el-button type="success" @click="dialogVisible = true" size="small">
          选择节点
        </el-button>
        <el-dialog
          title="授权"
          v-if="dialogVisible"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
        >
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            >
            </el-table-column>
            <el-table-column prop="ip1" label="分布式节点" width="360">
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEprClick">确 定</el-button>
          </span>
        </el-dialog>
        <el-form-item style="clear: both" label="任务计划" prop="time">
          <el-radio v-model="ruleForm.clock" label="1">立即执行</el-radio>
          <el-radio v-model="ruleForm.clock" label="2">指定日期</el-radio>
          <el-radio v-model="ruleForm.clock" label="3">每天巡检</el-radio>
          <el-radio v-model="ruleForm.clock" label="4">每周巡检</el-radio>
        </el-form-item>
        <el-row style="width: 60%; height: 50px" label="定时器">
          <el-col :span="11">
            <el-form-item label="任务时间" prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.date2"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          style="width: 100%; padding: 20px 0px 0px 0px; clear: both"
        >
          <el-button type="primary" v-on:click="register">创建任务</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <clockProgress ref="clockProgress" />
          <clockTime ref="clockTime" />
        </el-form-item>
        <div style="clear: both" />
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import clockProgress from './clockProgress/index'
import clockTime from './clockTime/index'
export default {
  components: {
    clockProgress,
    clockTime,
  },
  data() {
    return {
      ruleForm: {
        name: '',
        type: '',
        clock: '',
        date1: '',
        date2: '',
      },
      arrayData: [
        {
           ip: '11111' ,
        },
      ],
      dataNum: 0,
      dialogVisible: false,
      tableData: [
        {
          ip1:this.$store.state.scanning.node_ip
        }
      ],
      rules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择任务类型', trigger: 'change' },
        ],
        time: [
          { required: true, message: '请选择任务计划', trigger: 'change' },
        ],
        date1: [{ type: 'date1', message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date2', message: '请选择时间', trigger: 'change' }],
      },
      loading: false,
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          alert('submit!')
          setTimeout(this.cancelLoading, 5000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    add(item) {
      this.arrayData.push(
        //增加就push进数组一个新值
        {
          ip: this.dataNum++,
        }
      )
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },

    handleEprClick() {
      axios
        .post('http://localhost:5000/scan_task', {
          ip: this.ip1,
        })
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    },


    cancelLoading() {
      this.loading = false
    },

    changeShow() {
      this.CanAddTip = !this.CanAddTip
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    increase() {
      this.percentage += 10
      if (this.percentage > 100) {
        this.percentage = 100
      }
    },
    decrease() {
      this.percentage -= 10
      if (this.percentage < 0) {
        this.percentage = 0
      }
    },
    open() {
      console.log(this.$refs.clockTime)
      this.$refs.clockTime.show()
    },
    register: function () {
      axios
        .post('http://localhost:5000/scan_task', {
          name: this.ruleForm.name,
          type: this.ruleForm.type,
          ip: this.arrayData.ip,
          clock: this.ruleForm.clock,
        })
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      console.log(this.$refs.clockProgress)
      this.$refs.clockProgress.show()
    },
  },
}
</script>

<style lang="scss" scoped>
.scanning-banner {
  margin: 0.3%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}

.scanning-menu {
  width: 100%;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.671);
}

.scanning-list {
  height: 175px;
  overflow: auto;
  padding-left: 3px;
}

.line {
  font-size: 10px;
}
</style>
